<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.4/css/layui.css}" media="all">
</head>
<body style="padding: 30px">
<div class="layui-form">
    <div class="layui-row layui-col-space12">
        <div class="layui-col-md4 layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-user"></i>
                </div>
                <input type="text" lay-verify="required|username" name="username"placeholder="用户账户"
                       th:value="${user.username}" class="layui-input layui-disabled" disabled>
            </div>
        </div>
        <div class="layui-col-md4 layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="oldPassword" lay-verify="required|oldPassword" lay-reqtext="请输入旧密码"
                       placeholder="请输入旧密码" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md4 layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="newPassword" lay-verify="required|newPassword" lay-reqtext="请输入新密码"
                       placeholder="请输入新密码" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md4 layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="confirmPassword" lay-verify="required|confirmPassword" lay-reqtext="再次输入新密码"
                       placeholder="请再次输入新密码" value="" class="layui-input">
            </div>
        </div>
    </div>
    <input type="hidden" name="id" placeholder="用户ID" th:value="${user.id}" class="layui-input" >
    <div class="layui-row">
        <div class="layui-col-md12" style="text-align: center;">
            <button class="layui-btn layui-btn-primary" lay-filter="saveBtn" lay-submit>保存</button>
        </div>
    </div>
</div>
<script>
    let ctx = '[[${#servletContext.contextPath}]]';
</script>
<script th:src="@{/static/lib/layui-v2.8.4/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/captcha/js/crypto-js.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/captcha/js/ase.js}" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        layer = layui.layer;
        $ = layui.$;
        //     自定义验证规则
        form.verify({
            password: function (value) {
                if (value.length < 6 || value.length > 12) {
                    return '密码长度必须为6-12个字符';
                }
            },
            repass: function (value) {
                if (value.length < 6 || value.length > 12) {
                    return '密码长度必须为6-12个字符';
                }
            }
        });
        //监听提交
        form.on('submit(saveBtn)' , function (data) {
            //    获取表单数据
            data = data.field;
            console.log(data)
            //     密码加密
            let key = CryptoJS.lib.WordArray.random(16).toString();
            data.key = key;
            console.log(data.key)
            data.newPassword = aesEncrypt(data.newPassword, key);
            //   重复密码加密
            data.confirmPassword = aesEncrypt(data.confirmPassword, key);
            //     旧密码加密
            data.oldPassword = aesEncrypt(data.oldPassword, key);
                    //     发送异步请求
                    fetch( ctx + '/admin/userPasswordUpdate', {
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        method: 'post',
                        body: JSON.stringify(data)
                    }).then(function (resp) {
                        return resp.json();
                    }).then(function (json) {
                        if (json.code == 200) {
                            layer.alert('密码修改成功', function () {
                                //     关闭弹窗
                                let index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                //     刷新父页面
                                parent.location.reload();
                            });
                        } else {
                            layer.msg(json.msg, {icon: 2, time: 2000})
                        }
                    }).catch(function (error) {
                        layer.msg(error.msg, {icon: 2, time: 2000})
                    });
                    return false;
        });
    });

    //失去焦点时验证密码是否输入
    let requestSent = false;
    $('input').blur(function () {
        let password = $(this).val();
        if (password == null || password == '') {
            layer.alert('密码不能为空', {icon: 2, time: 2000});
            return false;
        }
        if (requestSent) {
            return false;
        }
    });
</script>
</body>
</html>